<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<%@ include file="/common/common-css.jsp"%>
<style>
#jquery-table td {
	cursor: pointer !important
}

.load_bg {
	background: #000;
	opacity: 0.1;
	left: 0px;
	top: 0px;
	position: fixed;
	height: 100%;
	width: 100%;
	overflow: hidden;
	z-index: 10000;
}

.load_img {
	left: 50%;
	top: 180px;
	position: fixed;
	height: 50px;
	overflow: hidden;
	z-index: 20000;
}
</style>
</head>
<body class="no-skin">
	<div class="load_bg" style="display: none;"></div>
	<img src="http://img.xmiles.cn/commentloading.gif" class="load_img"
		style="display: none" />
	<div class="page-content">
		<div id="test"></div>
		<div class="page-header"
			style="margin-bottom: 0px; padding-bottom: 10px;">

			<h1 id="fu_name"></h1>
		</div>
		<form id="queryForm">
			<div class="page-content-area">
				<div class="row">
					<div class="col-sm-12">
						<div class="widget-box"
							style="border: 0px solid #ccc; border-top: none; border-bottom: none;">
							<div class="widget-header widget-header-blue widget-header-flat">
								<h4 class="widget-title">选择条件进行查询</h4>

								<div class="widget-toolbar">
									<a href="#" data-action="collapse"> <i
										class="ace-icon fa fa-chevron-up"></i>
									</a>
								</div>
							</div>

							<div class=" widget-body">
								<!-- <div class="widget-main" style="padding:12px;border:0px solid #ccc; border-top:none;border-bottom:none;"> -->
								<div class="widget-main">
									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-6 control-label"
											style="text-align: right" for="channel">渠道名:</label>
										<div class="col-sm-6">
											<s:select id="channel" name="channel" list="%{channelList}"
												cssClass="form-control" headerKey="" headerValue="全选" />
										</div>
									</div>

									<div class="form-group col-xs-12 col-sm-4 col-md-3 col-lg-3">
										<label class="col-sm-4 control-label"
											style="text-align: right" for="sex">时间:</label>
										<div class="col-sm-8">
											<div class="input-daterange input-group">
												<input type="text" data-date-format="yyyy-mm-dd"
													class="date-picker input-sm form-control"
													style="padding-left: 0px" name="startTime"> <span
													class="input-group-addon" style="width: 6px"> <i
													class="fa fa-exchange"></i>
												</span> <input type="text" data-date-format="yyyy-mm-dd"
													class="date-picker input-sm form-control"
													style="padding-left: 0px" name="endTime">
											</div>
										</div>
									</div>
								</div>
								<!-- /.widget-main -->
							</div>
							<!-- /.widget-body -->
						</div>
						<!-- /.widget-box -->
					</div>
					<!-- /.col-sm-12 -->
					<div class="col-md-12 center">
						<div class="clearfix form-actions">

							<button class="btn btn-purple  no-border" type="button"
								name="btn-query" onclick="query_any()" id="btn-query">
								<i class="ace-icon fa fa-search icon-on-right bigger-110"></i>
								查询
							</button>
							&nbsp;&nbsp;&nbsp;
							<button class="btn btn-grey  no-border" type="reset">
								<i class="ace-icon fa fa-undo icon-on-right bigger-110"></i> 重置
							</button>

						</div>
					</div>
				</div>
				<!-- /.row -->






				<div class="row">
					<div class="col-xs-12">
						<table id="jquery-table"
							class="table table-striped table-bordered table-hover">
						</table>
					</div>
					<!-- /.col -->
				</div>
				<!-- /.row -->

			</div>
			<!-- /.page-content-area -->
		</form>
	</div>
	<!-- /.page-content -->

	<%@ include file="/common/common-js.jsp"%>
	<script type="text/javascript" src="${ctx}/js/call_func.js"></script>
	<!-- inline scripts related to this page -->
	<script type="text/javascript">
		//导出列表
		function loadlist() {
			var form = document.forms["queryForm"];
			form.action = ctx + "/caramercament/download.action";
			form.submit();
		}
		//接受URL参数，进行文档写入
		function getQueryString(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
			var r = window.location.search.substr(1).match(reg);
			if (r != null)
				return decodeURI(r[2]);
			return null;
		}
		//【查询】按钮Click事件
		function query_any() {
			$("#output").removeAttr("style");
			$(".load_bg").removeAttr("style");
			$(".load_img").removeAttr("style");
			if (jqTable != null) {
				jqTable.fnDraw();

			} else {
				loaddata();
				$("#checkAll").on(
						"change",
						function() {
							if ($("#checkAll").prop("checked") == true) {
								$('input[name = "id"]:checkbox').prop(
										"checked", true);
							} else {
								$('input[name = "id"]:checkbox').prop(
										"checked", false);

							}

						});

			}
		}
		var jqTable = null;
		var loaddata = function() {
			jQuery(function($) {
				jqTable = $('#jquery-table')
						.dataTable(
								{
									//数据列控制（包括对应返回JSON属性名称，对应表头列索引位置、数据转换封装等）
									"columnDefs" : [
											{
												"title" : "时间",
												"name" : "rtime",
												"data" : "rtime",
												"targets" : [ 0 ],
												"bSortable" : false,
												"width" : "10%"
											}, {
												"title" : "渠道",
												"name" : "channel",
												"data" : "channel",
												"targets" : [ 1 ],
												"bSortable" : false,
												"width" : "10%"
											}, {
												"title" : "今日关注数",
												"name" : "today_follow",
												"data" : "today_follow",
												"targets" : [ 2 ],
												"bSortable" : false,
												"width" : "10%",
											}, {
												"title" : "今日取关数",
												"name" : "today_un_follow",
												"data" : "today_un_follow",
												"targets" : [ 3 ],
												"bSortable" : false,
												"width" : "10%",
											}, {
												"title" : "历史取关数",
												"name" : "history_un_follow",
												"data" : "history_un_follow",
												"targets" : [ 4 ],
												"width" : "10%",
												"bSortable" : false,
											},
											{
									    	 	  "title":"取关率",
									    	 	  "name": "history_un_follow",
									    	 	 "targets": [5],
									    	 	//  "bSortable": false,
									    	 	  "width": "4%",
									    	 	  "render": function(value, type, row) { // 返回自定义内容
									    	 	  	 var value = row.today_un_follow/row.today_follow;
									    	 		 var a = (value*100).toFixed(2)+'%';
									    	 		 return a;
									    	 	  }
									    	}
											, {
												"title" : "累计关注量",
												"name" : "total_follow",
												"data" : "total_follow",
												"targets" : [ 6 ],
												"width" : "10%",
												"bSortable" : false,
											}, {
												"title" : "剩余关注量",
												"name" : "remain_follow",
												"data" : "remain_follow",
												"targets" : [ 7 ],
												"width" : "10%",
												"bSortable" : false,
											}, {
												"title" : "激活APP数",
												"name" : "activity_app",
												"data" : "activity_app",
												"targets" : [ 8 ],
												"width" : "10%",
												"bSortable" : false,
											}, {
												"title" : "用券人数",
												"name" : "user_coupon_user",
												"data" : "user_coupon_user",
												"targets" : [ 9 ],
												"width" : "10%",
												"bSortable" : false,
											}, 
											{
												"title" : "用券次数",
												"name" : "user_coupon_count",
												"data" : "user_coupon_count",
												"targets" : [ 10 ],
												"width" : "10%",
												"bSortable" : false,
											}],
									"sAjaxSource" : ctx + "/weixin/weixin_new_coupon_stat.action",//数据源URL
									"fnServerData" : function(sSource, aoData,
											fnCallback) {//从服务器请求数据
										var data = $('#queryForm')
												.serializeObject();

										data.aoData = JSON.stringify(aoData);
										$.ajax({

											"type" : "POST",
											"dataType" : 'json',
											"url" : sSource,
											"data" : data,
											"success" : function(resp) {

												fnCallback(resp);
												initListPage();
												$(".load_bg").attr("style",
														"display:none");
												$(".load_img").attr("style",
														"display:none");
											},
											"error" : function(XMLHttpRequest,
													textStatus, errorThrown) {

											},

										});
									},
									"fnRowCallback" : function(nRow, aData,
											iDisplayIndex, iDisplayIndexFull) {

									},
									"sScrollXInner" : "100%",
									"sScrollY" : "100%",//如果不设置，IE会有问题
									"aaSorting" : [ [ 9, "desc" ] ]
								//初始化加载，默认按第几列排序、排序方式（列从0开始计算）
								});
			});
		}

		//时间控件
		jQuery(function($) {
			$(".date-picker").datepicker({
				autoclose : true
			}).next().on(ace.click_event, function() {
				$(this).prev().focus();
			});
		});
		
	    jQuery(function ($) {
	        $("#channel").combobox();
	    });
	</script>

</body>
</html>